﻿
@charset "utf-8";
body { margin:0; padding:0; width:100%; color:#5f5f5f; font:normal 12px/1.8em 微軟正黑體, Arial, Helvetica, sans-serif;}
html { padding:0; margin:0; background: url('images/xmas_bg.jpg') 50% 0 no-repeat;}
.main { padding:0; margin:0;}
.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
.logo { padding:0 0 0 40px; float:left; width:auto;}
h1 { margin:0 0 0 -12px; padding:10px 16px 16px 0; color:#61c0ec; font:normal 48px/1.2em 微軟正黑體, Arial, Helvetica, sans-serif; letter-spacing:-3px; text-transform:uppercase;}
h1 a, h1 a:hover { color:#61c0ec; text-decoration:none; border:none;}
h1 span { color:#bbb;}
h1 small { display:block; padding:4px 0; font:normal 12px/1.2em 微軟正黑體, Arial, Helvetica, sans-serif; letter-spacing:normal; color:#c1bfbf; text-transform:none;}
h1 img { width:154px; height:100px; border:none;}
h2 { font:normal 24px 微軟正黑體, Arial, Helvetica, sans-serif; padding:8px 0 12px; margin:8px 0; color:#61c0ec;}
p { margin:8px 0; font:normal 12px/1.8em 微軟正黑體, Arial, Helvetica, sans-serif;}
p.spec { }
a { color:#61c0ec; text-decoration:underline;}
a.rm, a.com { text-decoration:none;}

.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar { margin:0; padding:0;}
.hbg_resize, .fbg_resize { margin:0 auto; padding:0 40px; width:890px;}

/* header */
.header { }
.header_resize { margin:0 auto; padding:0; width:970px;}

/* hbg */
.hbg { height:200px;}

/* menu */
.menu_nav { margin:0; float:left; background: rgba(0, 0, 0, .5); border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; behavior: url(ie-css3.htc);}
.menu_nav ul { list-style:none;}
.menu_nav ul li { margin:0; float:left;}
.menu_nav ul li a { display:block; margin:0; padding:20px 45px 20px 45px; color:#fff; text-decoration:none; font-size:14px; line-height:1.2em; transition: all .3s linear 0s; -moz-transition: all .3s linear 0s; -webkit-transition: all .3s linear 0s; -o-transition-transition: all .3s linear 0s;}
.menu_nav ul li.left a:hover { border-top-left-radius: 15px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px;border-bottom-left-radius: 15px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; behavior: url(ie-css3.htc);}
.menu_nav ul li.right a:hover { border-top-right-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 15px;border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; -webkit-border-bottom-right-radius: 15px; behavior: url(ie-css3.htc);}
.menu_nav ul li:hover { background-color: rgba(0, 0, 0, .2); color:#fff;text-shadow: 0 0 12px white,0 0 6px white,0 0 3px black;}
.menu_nav ul li.active a, .menu_nav ul li a:hover { color:#fff; }
.menu_nav ul li.left.active a, .menu_nav ul li.left:hover { border-top-left-radius: 15px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px;border-bottom-left-radius: 15px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; behavior: url(ie-css3.htc);}
.menu_nav ul li.right.active a, .menu_nav ul li.right:hover { border-top-right-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 15px;border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; -webkit-border-bottom-right-radius: 15px; behavior: url(ie-css3.htc);}
.menu_nav ul li a small { display:block; font-size:11px;}

/* content */
.content_resize { margin:0 auto; width:900px;}
.content { padding-top: 5px;}
.content .mainbar { margin:0; padding:0; float:left; width:670px;}
.content .mainbar img { padding:4px; border:1px solid #b7b7b7; background-color:#fff;}
.content .mainbar img.fl { margin:4px 16px 4px 0; float:left;}
.content .mainbar .article { margin:0; padding:0 24px 24px 40px;}
.content .sidebar { padding:0; float:right; width:300px;}
.content .sidebar .gadget { margin:0; padding:0 16px 24px 40px;}
ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595;}
ul.sb_menu li, ul.ex_menu li { margin:0;}
ul.sb_menu li { padding:4px 0 4px 12px; width:220px;}
ul.ex_menu li { padding:4px 0 8px 12px;}
ul.sb_menu li a, ul.ex_menu li a { color:#5f5f5f; text-decoration:none; margin-left:-12px; padding-left:12px;}
ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#61c0ec; font-weight:bold;}
ul.sb_menu li a:hover { text-decoration:underline;}
ul.ex_menu li a:hover { text-decoration:none;}
.content p.date { margin:12px 12px 0 0; padding:2px 6px 6px; float:left; width:40px; color:#fff; background-color:#61c0ec; font-size:17px; line-height:1.6em; text-align:center; text-transform:uppercase;}
.content p.date span { display:block; padding:4px 0; float:left; width:40px; font-size:30px; color:#61c0ec; background-color:#fff;}
.content p.pages { padding:0 24px 0 40px; font-size:11px; color:#959595; text-align:right;}
.content p.pages span, .content p.pages a:hover { padding:5px 10px; color:#fff; background-color:#49b6e9;}
.content p.pages a { padding:5px 10px; color:#fff; background-color:#bdbdbd;}
.content p.pages small { font-size:11px; float:left;}
/* subpages */
.content .mainbar .comment { margin:0; padding:16px 0 0 0;}
.content .mainbar .comment img.userpic { border:1px solid #dedede; margin:10px 16px 0 0; padding:0; float:left;}

/* fbg */
.fbg { }
.fbg_resize { padding:24px 40px; /*border-top:1px solid #efefef;*/ border-bottom:1px solid #efefef;}
.fbg a { }
.fbg  h2 { }
.fbg img { }
.fbg .col { margin:0; float:left;}
.fbg .cm { height:230px;}
.fbg .cm1 { height:250px; padding: 20px 0 0 0;}
.fbg .clogin { padding:0 16px 0 0; width:260px; height:230px; float:left; background:url('images/loginform.jpg') no-repeat;}
.fbg .clogin #loginmain { padding:100px 20px 0 20px; color:#666;}
.fbg .c1 { padding:0 16px 0 0; width:270px; float:left;}
.fbg .c2 { padding:72px 0 0 0; width:270px; height: 200px; background:url('images/hot_news.jpg') no-repeat;}
.fbg .c3 { padding:72px 0 0 0; width:334px; height: 200px; background:url('images/game_rank.jpg') no-repeat;}
.fbg .c1 img { padding:5px 0 0 0;}
.fbg .c3 img { margin:8px 16px 4px 0; float:left;}

/* footer */
.footer { }
.footer_resize { margin:0 auto; padding:24px 40px; width:890px;}
.footer p.lf { margin:0; padding:4px 0; float:right; width:auto; line-height:1.5em; color:#5f5f5f;}
.footer p.lf a { }
ul.fmenu { margin:0; padding:2px 0; list-style:none; float:left; width:auto;}
ul.fmenu li { margin:0; padding:0 2px 0 0; float:left;}
ul.fmenu li a { color:#5f5f5f; text-decoration:none; padding:16px;}
ul.fmenu li a:hover, ul.fmenu li.active a { color:#61c0ec;}
ul.fmenu li a:hover { text-decoration:underline;}

/* form */
ol { list-style:none;}
ol li { display:block; clear:both;}
ol li label { display:block; margin:0; padding:16px 0 0 0;}
ol li input.text { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:5px 2px; height:16px; background-color:#fff;}
ol li textarea { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:2px; background-color:#fff;}
ol li .send { margin:16px 0 0 0;}

/* search */
.searchform { }
#formsearch { margin:0; padding:0 0 48px 40px;}
#formsearch span { display:block; margin:6px 0; padding:0; float:left; background:#fff url(images/search.gif) no-repeat top left;}
#formsearch input.editbox_search { margin:0; padding:11px 6px 10px; float:left; width:181px; border:none; background:none; font:normal 12px/1.5em Arial, Helvetica, sans-serif; color:#a8acb2;}
#formsearch input.button_search { margin:6px 0 0 0; padding:0; border:none; float:left;}
.field {
color: #666;
width: 130px;
float:left;
display: inline-block;
font-size :15px;
padding: 6px 30px 0 0;
}
#picturescroll
		{
			width:100%;
			height: 330px;
			position: relative;
		}
		
		/* Replace the last selector for the type of element you have in
		   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
		   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
		#picturescroll div.scrollableArea img
		{
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}
		
		#navbar li ul {
			display: none; 
			z-index: 100;
			width: 118px; /* Width to help Opera out */
			background: #fff;
			color: #61C0EC;
		}
		
		#navbar li:hover ul, #navbar li.hover ul {
			display: block;
			position: absolute;
			margin: 0;
			padding: 0;
		}
		
		#navbar li:hover li, #navbar li.hover li {
			float: none;
		}
		
		#navbar li:hover li a, #navbar li.hover li a {
			
		}
		#dropmenu {
			-moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);
			-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
			box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
			border-bottom-left-radius: 15px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px;
			border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; -webkit-border-bottom-right-radius: 15px; behavior: url(ie-css3.htc);
		}
		#dropmenu li a{
			color: #666;
			padding: 10px 0 10px 0;
			text-align: center;
			border-radius: 0px;
			text-shadow: none;
		}
		#dropmenu li a:hover{
		}


.submit {
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	display:inline-block;
	color:#fff;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
}.submit:hover {

}.submit:active {
	position:relative;
	top:1px;
	}
.gray { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
color:#ccc;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;}
.black { border-radius:6px;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #6f6f6f), color-stop(1, #464646) );
background:-moz-linear-gradient( center top, #6f6f6f 5%, #464646 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f6f6f', endColorstr='#464646');
background-color:#6f6f6f;}
	
.black:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #464646), color-stop(1, #6f6f6f) );
background:-moz-linear-gradient( center top, #464646 5%, #6f6f6f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#6f6f6f');
background-color:#464646;}

.n { border-radius:6px;color:#666; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6) );
background:-moz-linear-gradient( center top, #ffffff 5%, #f6f6f6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6');
background-color:#ffffff;}
	
.n:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #f6f6f6 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff');
background-color:#f6f6f6;}

.blue { border-radius:6px;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
background-color:#79bbff;}
	
.blue:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
background-color:#4197ee;}

.dblue { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
background-color:#3d94f6;}

.dblue:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
background-color:#1e62d0;}

.red { border-radius:6px;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f) );
background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
background-color:#f24537;}
	
.red:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537) );
background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
background-color:#c62d1f;}

.orange { border-radius:6px;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
background-color:#f6b33d;}
	
.orange:hover {	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
background:-moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d29105', endColorstr='#f6b33d');
background-color:#d29105;}

.yellow { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffe45c), color-stop(1, #edb603) );
background:-moz-linear-gradient( center top, #ffe45c 5%, #edb603 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe45c', endColorstr='#edb603');
background-color:#ffe45c;}

.yellow:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #edb603), color-stop(1, #ffe45c) );
background:-moz-linear-gradient( center top, #edb603 5%, #ffe45c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#edb603', endColorstr='#ffe45c');
background-color:#edb603;}

.green { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
background-color:#77d42a;}

.green:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
background-color:#5cb811;}

.purple { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c123de), color-stop(1, #a20dbd) );
background:-moz-linear-gradient( center top, #c123de 5%, #a20dbd 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c123de', endColorstr='#a20dbd');
background-color:#c123de;}

.purple:hover { 	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a20dbd), color-stop(1, #c123de) );
background:-moz-linear-gradient( center top, #a20dbd 5%, #c123de 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a20dbd', endColorstr='#c123de');
background-color:#a20dbd;}

.date { width: 225px; border-bottom: 1px solid #DCDDE3; color:#EF6179;}
.title {border-bottom: 1px solid #DCDDE3;
color: #666;font-size: 25px;
padding: 0 0 6px;
list-style: none;
font-weight: normal;}
.input_text {width: 200px;height:28px;padding: 5px 5px;border: 1px solid #C6C6C6;
border-bottom: 1px solid #EEE;
border-right: 1px solid #EEE;
background: #F9F9F9;
color:#999;}
*{margin:0;padding:0;}
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{zoom:1;}
ul,li{list-style:none;}
img{border:0;}
/* focus */
#focus{width:600px;height:230px;overflow:hidden;position:relative;float:right}
#focus ul{height:380px;position:absolute;}
#focus ul li{float:left;width:600px;height:230px;overflow:hidden;position:relative;background:#000;border-radius: 15px;-moz-border-radius: 15px;-webkit-border-radius: 15px;}
#focus ul li img{border-radius: 15px;-moz-border-radius: 15px;-webkit-border-radius: 15px;}
#focus ul li div{position:absolute;overflow:hidden;}
#focus .btnBg{position:absolute;width:600px;height:20px;left:0;bottom:0;background:#000;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-moz-border-bottom-left-radius: 15px;
-moz-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;}
#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}
#focus .btn span.on{background:#fff;}
#focus .preNext{width:45px;height:100px;position:absolute;top:110px;background:url(images/sprite.png) no-repeat 0 0;cursor:pointer;}
#focus .pre{left:0;}
#focus .next{right:0;background-position:right top;}
#progress{text-align:center;}
#progress progress{margin-top:30px;width:500px;}
#progress strong{font-weight:normal;font-size:16px;color:#000;}
#progress p{margin-top:20px;font-size:14px;}